<script>
import Context from "./Context.vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";

export default {
  name: "ContextBox",

  components: {Context},
  data(){
    return {
      cardsArr:null,
      displayCard:null,
      displayLimit:3
    }
  },
  methods:{

    getMusicCard(){
      axios.post("http://113.44.66.99:8080/getAllCard").then((response) => {
        this.displayCard = response.data.data.filter(card=>card.category=='音乐');
      })
    },
    getPicCard(){
      axios.post("http://113.44.66.99:8080/getAllCard").then((response) => {
        this.displayCard = response.data.data.filter(card=>card.category=='图片');
      })
    },
    getVideoCard(){
      axios.post("http://113.44.66.99:8080/getAllCard").then((response) => {
        this.displayCard = response.data.data.filter(card=>card.category=='视频');
      })
    },
    showMore(){
      this.displayLimit+=5;
      this.displayCard=this.cardsArr.slice(0,this.displayLimit);
    },
    encourageClick(item){
      const token = localStorage.getItem('token');
      console.log(item)
      axios.post("http://113.44.66.99:8080/getUserMessage",{},{
        headers:{
          Authorization:token
        }
      }).then((response) => {
        axios.get(`http://113.44.66.99:8080/dianzan?userId=${response.data.data.userId}&cardId=${item.contentCardId}`).
        then((response) => {

          if(response.data.data==1){
            ElMessageBox.alert("您已经赞过了哦")
          }else{
            item.encourageCount+=1;
          }
        })
      })


    }

  },
  mounted() {
    axios.post("http://113.44.66.99:8080/getAllCard").then((response) => {

      this.cardsArr = response.data.data.filter(item=>{
        return item.isAudit==true;
      });
      this.displayCard=this.cardsArr.slice(0,this.displayLimit);

    })
  }
}
</script>

<template>
<div class="w-2/3 border-t flex m-auto">
  <div class="w-3/12   mr-5  flex flex-col ">
    <div class="h-20 text-center justify-center border-b hover:cursor-pointer bg-gray-500/30 hover:brightness-50 text-2xl hover:text-4xl flex items-center" @click="getMusicCard">
      <div>音乐</div>
    </div>
    <div class=" h-20  text-center border-b hover:cursor-pointer hover:brightness-50 bg-gray-500/30 text-2xl hover:text-4xl flex items-center justify-center" @click="getVideoCard">
      <div>视频</div>
    </div>
    <div class="h-20 text-center border-b hover:cursor-pointer hover:brightness-50 bg-gray-500/30 text-2xl hover:text-4xl flex items-center justify-center"@click="getPicCard">
      <div>图片</div>
    </div>
  </div>
  <div class="w-7/12 bg-stone-700/15 ">

    <context v-for="item in displayCard">
      <template v-slot:category>
          {{item.category}}
      </template>
      <template v-slot:title>{{item.contextTitle}}</template>
      <template v-slot:userPic>
        <div class=" flex text-white">

            <img :src="item.head_pic" class="size-10">

          <div class="flex  justify-center items-center">{{item.userNickName}}<div class="text-gray-600">发布</div></div></div>
      </template>
      <template v-slot:content>
        <div v-if="item.category==='图片'"><a :href="'/cardMessage.html?CardId='+item.contentCardId"><img :src="item.contentResource" class="hover:scale-125 hover:animate-pulse"></a></div>
        <div v-if="item.category==='音乐'"><audio controls :src="item.contentResource"></audio></div>
        <div v-if="item.category==='视频'"><video controls :src="item.contentResource"></video></div>
      </template>
      <template v-slot:encourage>{{item.encourageCount}}<svg @click="encourageClick(item)" t="1734422283885" class="icon mr-10 hover:cursor-pointer hover:brightness-150" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1661" width="32" height="32"><path d="M229.3 403.43h200.31v396.86H229.3z" fill="#D0E2F3" p-id="1662"></path><path d="M352.65 403.43h76.96v396.86h-76.96z" fill="#A0C8EA" p-id="1663"></path><path d="M429.61 818.4H229.3c-10 0-18.12-8.11-18.12-18.12V403.43c0-10 8.11-18.12 18.12-18.12h200.31c10 0 18.12 8.11 18.12 18.12v396.86c-0.01 10-8.12 18.11-18.12 18.11z m-182.19-36.23h164.07V421.54H247.42v360.63z" fill="#49416F" p-id="1664"></path><path d="M618.68 266.53v172.42h29.79v0.09h111.07c21.93 0 40.8 16.85 41.83 38.76 1.1 23.39-17.53 42.7-40.68 42.7h-25.84c23.15 0 41.78 19.31 40.68 42.7-1.03 21.91-19.9 38.76-41.83 38.76H709c23.15 0 41.78 19.31 40.68 42.7-1.03 21.91-19.9 38.76-41.83 38.76h-24.69c23.15 0 41.78 19.31 40.68 42.7-1.03 21.91-19.9 38.76-41.83 38.76h-252.4V438.95h55.26l41.21-182.73c4.82-21.38 23.81-36.57 45.73-36.57 25.89 0 46.87 20.99 46.87 46.88z" fill="#FFFFFF" p-id="1665"></path><path d="M682.01 782.97h-252.4c-10 0-18.12-8.11-18.12-18.12v-325.9c0-10 8.11-18.12 18.12-18.12h40.77l38.02-168.6c6.73-29.85 32.81-50.7 63.4-50.7 35.84 0 65 29.16 65 65v154.3h11.67c0.61 0 1.22 0.03 1.82 0.09h109.25c32.12 0 58.44 24.61 59.93 56.02 0.77 16.26-4.98 31.68-16.19 43.43-4.88 5.12-10.64 9.27-16.92 12.32 5.26 9.45 7.8 20.2 7.27 31.35-1.03 22.04-14.3 40.73-33.22 49.92 5.33 9.49 7.91 20.31 7.38 31.53-1.04 22.04-14.3 40.73-33.22 49.92 5.33 9.49 7.91 20.31 7.38 31.53-1.49 31.43-27.82 56.03-59.94 56.03z m-234.29-36.23h234.29c12.53 0 23.18-9.64 23.74-21.5 0.29-6.27-1.92-12.21-6.22-16.72-4.31-4.52-10.12-7.01-16.36-7.01-10 0-18.12-8.11-18.12-18.12s8.11-18.12 18.12-18.12h24.69c12.53 0 23.18-9.64 23.74-21.49 0.29-6.27-1.92-12.21-6.22-16.72-4.31-4.52-10.12-7.01-16.36-7.01-10 0-18.12-8.11-18.12-18.12 0-10 8.11-18.12 18.12-18.12h24.69c12.53 0 23.18-9.64 23.73-21.49 0.29-6.27-1.91-12.21-6.22-16.72-4.31-4.52-10.12-7.01-16.36-7.01-10 0-18.12-8.11-18.12-18.12s8.11-18.12 18.12-18.12h25.84c6.24 0 12.05-2.49 16.36-7.01 4.31-4.51 6.51-10.45 6.22-16.72-0.56-11.85-11.2-21.5-23.73-21.5H648.47c-0.61 0-1.22-0.03-1.82-0.09h-27.97c-10 0-18.12-8.11-18.12-18.12V266.53c0-15.86-12.9-28.76-28.76-28.76-13.54 0-25.08 9.23-28.06 22.44l-41.2 182.73a18.112 18.112 0 0 1-17.67 14.13h-37.14v289.67z" fill="#49416F" p-id="1666"></path></svg> <a :href="'/cardMessage.html?CardId='+item.contentCardId">详细信息/评论</a></template>
    </context>

    <div class="text-center text-2xl h-20 mt-20 border-black border-2 hover:brightness-50 bg-blue-300/20 flex justify-center items-center" @click="showMore"><div>查看更多</div></div>

  </div>
  <div class=" grow ">
    <div class="top-20 ml-5 sticky text-center items-center">
    <img src="/二维码.png" class="h-40 w-40 ">
      若有问题请联系
    </div>
  </div>
</div>
</template>

<style scoped>

</style>